<template>
  <PipelineSearchCom></PipelineSearchCom>

  <el-table
    v-loading="pipelineListLoading"
    :data="pipelineList.arr"
    stripe
    highlight-current-row
    max-height="440"
    border
  >
    <el-table-column prop="id" label="管道编号" width="100"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="stationName" label="所属站点"></el-table-column>
    <el-table-column prop="type" label="类型"></el-table-column>
    <el-table-column prop="length" label="长度(km)"></el-table-column>
    <el-table-column prop="radius" label="管道半径(m)"></el-table-column>
    <el-table-column prop="cycle" label="采集周期(s)">
      <template #default="scope">
        <el-tag type="primary">{{ calculateCycle(scope.row.cycle) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="status" label="状态" width="100">
      <template #default="scope">
        <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
        <el-tag v-else type="warning">禁用</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
    <el-table-column v-if="hasRole('admin')" label="操作" width="300">
      <template #default="scope">
        <el-button type="primary" @click="preEditPipeline(scope.row)">编辑</el-button>
        <el-button
          v-if="scope.row.status === 1"
          type="danger"
          @click="enablePipeline(scope.row.id, scope.row.status)"
          >禁用</el-button
        >
        <el-button v-else type="success" @click="enablePipeline(scope.row.id, scope.row.status)"
          >启用</el-button
        >
        <el-button type="primary" @click="preEidtCycle(scope.row)">设置采集周期</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    :page-sizes="[7, 9, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :background="true"
    class="pagination"
    @change="getPipelineList"
  />

  <el-dialog v-model="editCycleVisible" title="设置采集周期" width="40%">
    <div class="dialog-body">
      <el-input-number v-model="cycle.hour" :min="0" :max="12" controls-position="right" />
      <span class="label">时</span>
      <el-input-number v-model="cycle.minute" :min="0" :max="60" controls-position="right" />
      <span class="label">分</span>
      <el-input-number v-model="cycle.second" :min="0" :max="60" controls-position="right" />
      <span class="label">秒</span>
    </div>
    <template #footer>
      <div>
        <el-button @click="editCycleVisible = false">取消</el-button>
        <el-button type="primary" @click="editCycle">确定</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="editPipelineVisible" title="编辑管线" width="40%">
    <el-form :model="editPipelineForm" label-width="auto" label-position="right" size="large">
      <el-form-item label="管线名称">
        <el-input v-model="editPipelineForm.name"></el-input>
      </el-form-item>
      <el-form-item label="管线长度">
        <el-input-number v-model="editPipelineForm.length" class="type-select" :min="1" />
      </el-form-item>
      <el-form-item label="管线长度">
        <el-input-number
          v-model="editPipelineForm.radius"
          class="type-select"
          :precision="2"
          :step="0.1"
          :min="1"
        />
      </el-form-item>
      <el-form-item label="管线类型">
        <el-tooltip content="可手动输入并回车" placement="right">
          <el-select
            v-model="editPipelineForm.type"
            filterable
            allow-create
            default-first-option
            :reserve-keyword="false"
            class="type-select"
          >
            <el-option
              v-for="item in ['原油管道', '产品管道']"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-tooltip>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editPipelineVisible = false">取 消</el-button>
      <el-button type="primary" @click="editPipeline">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="PipelineManagePage">
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { hasRole } from '../utils/authUtils'
import PipelineSearchCom from '../components/PipelineSearchCom.vue'
import { usePipeline } from '../hooks/usePipeline'
const route = useRoute()
const {
  pipelineListLoading,
  pipelineList,
  currentPage,
  pageSize,
  total,
  pipelineSearchForm,
  editCycleVisible,
  cycle,
  editPipelineForm,
  editPipelineVisible,
  getPipelineList,
  enablePipeline,
  calculateCycle,
  preEidtCycle,
  editCycle,
  preEditPipeline,
  editPipeline
} = usePipeline()
onMounted(() => {
  pipelineSearchForm.stationName = route.query.stationName
  getPipelineList()
})
</script>
<style lang="less" scoped>
.pagination {
  margin-top: 10px;
}
.type-select {
  width: 240px;
}
.dialog-body {
  display: flex;
  justify-content: center;
  align-items: center;
  .label {
    padding: 0 12px;
  }
}
</style>
